<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>我的发票</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.address-list {
			background-color: #FFFFFF;
			padding: 0 0.75rem;
			margin-bottom: 0.5rem;
		}

		.aui-input,
		input[type="text"],
		input[type="password"],
		input[type="search"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="date"],
		input[type="datetime-local"],
		input[type="time"],
		input[type="number"],
		select,
		textarea {
			font-size: 0.75rem;
			text-align: right;
			/*color: #CCCCCC!important;*/
		}

		.aui-list .aui-list-item {
			min-height: 2.5rem;
			line-height: 2.5rem;
		}

		.aui-list .aui-list-item-label {
			width: 6.6rem;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		img {
			width: 1.5rem;
		}

		.sel-lable {
			display: inline-block;
			width: 3.5rem;
			text-align: center;
			height: 1.5rem;
			border-radius: .75rem;
			font-size: .7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 1.5rem;
			background: rgba(238, 238, 238, 1);
			margin-right: 0.5rem;
		}

		.sel-lable.active {
			color: #fff;
			background: #005A93
		}

		.aui-btn-block {
			width: 17.25rem;
			height: 2rem;
			line-height: 2rem;
			border-radius: 0.3rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: #005A93;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.btn-frame {
			margin: 3.2rem 0.5rem 2rem 0.5rem;
		}

		::placeholder {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
			text-align: left;
		}

		.info {
			display: flex;
			width: 100%;
			height: 2.75rem;
			line-height: 2.75rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.info>div:nth-child(1) {
			text-align: left;
			font-size: .75rem;
			width: 3.6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.info .zz {
			width: 5.6rem !important
		}

		.vlist img {
			width: 2rem;
			float: right;
			margin-top: 0.65rem
		}

		.info>div:nth-child(2) {
			flex: 72;
		}

		.info>div:nth-child(2) input {
			margin-top: .3rem;
			text-align: left;
			font-size: 15px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.info b {
			color: #F73024;
			font-weight: 400;
		}

		.info input {
			margin-left: 0.5rem;
		}

		.imgInfo img {
			width: 1.25rem;
			height: 1.25rem;
			float: right;
			margin-top: -1.6rem
		}

		.inputInfo {}
	</style>
</head>

<body>
	<div class="" id="app" v-cloak="">
		<div class="address-list">
			<div class="" style="padding-top:.75rem;">
				<span class="sel-lable" :class="{'active':receipt_type=='个人'}" tapmode @click="receipt_type='个人'">个人</span>
				<span class="sel-lable" :class="{'active':receipt_type=='单位'}" tapmode @click="receipt_type='单位'">单位</span>
			</div>

			<ul class="aui-list aui-form-list aui-list-in aui-list-noborder" style="margin-top:.75rem;">
				<li class="info">
					<div><b>*</b>发票抬头</div>
					<div>
						<input id="receipt_person" v-model="receipt_person" type="text" placeholder="请输入发票抬头">
					</div>
				</li>

				<li class="info" v-if="receipt_type=='个人'">
					<div><b>*</b>手机号</div>
					<div>
						<input maxlength="11" id="receipt_phone" v-model="receipt_phone" type="text" placeholder="请输入手机号码">
					</div>
				</li>

				<li class="info" v-if="receipt_type=='个人'">
					<div><b>*</b>邮箱</div>
					<div>
						<input type="text" v-model="receipt_email" id="receipt_email" placeholder="请输入邮箱">
					</div>
				</li>

				<li v-if="receipt_type=='单位'" class="info">
					<div><b>*</b>税号</div>
					<div>
						<input type="text" placeholder="请输入税号" v-model="receipt_num">
					</div>
				</li>
				<li v-if="receipt_type=='单位'" class="info">
					<div>开户银行</div>
					<div>
						<input type="text" placeholder="请输入开户银行" v-model="receipt_bank">
					</div>
				</li>
				<li v-if="receipt_type=='单位'" class="info imgInfo">
					<div>开户地区</div>
					<div>
						<div class="" onclick="select_address()" style="margin-top:-0.1rem">
							<input v-model="receipt_address" readonly type="text" placeholder="请选择" class="inputInfo">
							<img src="../../image/icon/right_jt.png" alt="" srcset="">
						</div>
					</div>
				</li>
				<li v-if="receipt_type=='单位'" class="info">
					<div>银行账号</div>
					<div>
						<input type="text" placeholder="请输入银行账号" v-model="receipt_account">
					</div>
				</li>
				<li v-if="receipt_type=='单位'" class="info vlist">
					<div class="zz">增值税专用发票</div>
					<div>
						<div class="aui-list-item-title" @click="ticket_type=ticket_type=='0'?1:0" style="float:right;margin-right:0.75rem;">
							<img v-if="ticket_type=='0'" src="../../image/icon/icon-switch-off.png">
							<img v-if="ticket_type=='1'" src="../../image/icon/icon-switch-on.png">
						</div>
					</div>
				</li>
				<li v-if="receipt_type=='单位' && ticket_type == 1" class="info">
					<div>营业地址</div>
					<div>
						<input type="text" placeholder="请填写您的公司地址" v-model="business_address">
					</div>
				</li>
				<li v-if="receipt_type=='单位' && ticket_type == 1" class="info">
					<div>营业电话</div>
					<div>
						<input type="text" placeholder="请填写您的公司电话号码" v-model="business_phone">
					</div>
				</li>

			</ul>
		</div>
		<div class="" style="font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);padding-left:.75rem;">
			<div class="moren" tapmode @click="setReceipt">

					<span style="display:inline-block;float:left;margin-top:.7rem;width:1.2rem;margin-top:0.2rem">
						<img v-if="is_default=='1'" src="../../image/icon/select_new.png"
							style="width:0.95rem;height:0.95rem;">
						<img v-if="is_default=='0'" src="../../image/icon/icon-noselect-red.png"
							style="width:0.9rem;height:0.9rem;">
					</span>
				<span class="" style="float:left;margin-top:0.2rem">我已阅读并同意<b style="color:#005A93;font-weight:bold" @click="open_win_page('增票资质确认书')">《增票资质确认书》</b> </span>
			</div>

		</div>
		<div class="btn-frame" tapmode tapmode @click="addReceipt()">
			<div class="aui-btn aui-btn-block" style="font-size:0.8rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);">
				保存
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../res/bluemark_3_city.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			receipt_person: '',	//发票抬头
			receipt_type: '个人',	//发票类型
			// receipt_name: '',
			receipt_num: '',	//税号
			receipt_phone: '',	//手机号
			receipt_email: '',	//邮箱
			receipt_bank: '',	//开户银行
			receipt_address: '',
			receipt_account: '',	//银行账号
			is_default: 0,
			province_id: 0,
			province_name: 0,
			city_id: 0,
			city_name: '',
			area_id: 0,
			area_name: '',
			ticket_type: 0,
			business_phone: '',
			business_address: ''

		},
		methods: {
			setReceipt: function () {

				if (vm.is_default==1) {
					vm.is_default=0
				}else{
					vm.is_default=1
				}
			},
			addReceipt: function() {

				// if (vm.receipt_name == '' && vm.receipt_person == '') {
				// 	toast('名称不能为空')
				// 	return;
				// }
				if (vm.is_default == 0) {
					toast('请确认已阅读并同意《增票资质确认书》')
					return
				}
				if(vm.receipt_person == ''){
					toast('发票抬头不能为空')
					return
				}
				if (vm.receipt_type == '个人') {
						if (vm.receipt_phone == '') {
								toast('手机号码不能为空')
								return;
						}
						if (vm.receipt_email == '') {
								toast('邮箱不能为空')
								return;
						}
				} else {
						if (vm.receipt_num == '') {
							toast('税号不能为空')
							return;
						}
						if (vm.receipt_bank == '') {
							toast('开户行不能为空')
							return;
						}
						if (vm.receipt_account == '') {
							toast('银行账号不能为空')
							return;
						}
						if (vm.province_id == 0 || vm.city_id == 0 || vm.area_id == 0) {
							toast('请选择开户地区')
							return;
						}
						if (vm.ticket_type == 1) {
							if (vm.business_address == '') {
								toast('营业地址不能为空')
								return;
							}
							if (vm.business_phone == '') {
								toast('营业电话不能为空')
								return;
							}
						}
				}

				// send_event('receipt_change',{
				// 	receipt_type:vm.receipt_type,
				// 	receipt_person:vm.receipt_person,
				// 	receipt_num:vm.receipt_num,
				// 	receipt_phone:vm.receipt_phone,
				// 	receipt_address:vm.receipt_address,
				// 	receipt_account:vm.receipt_account,
				// 	receipt_bank:vm.receipt_bank,
				// 	receipt_email:vm.receipt_email
				// })
				// delay_close(300)



				get_data('api/Receipt/addReceipt', {
					token: $api.getStorage('token'),
					receipt_type: vm.receipt_type,
					receipt_person: vm.receipt_person,
					receipt_phone: vm.receipt_phone,
					receipt_email: vm.receipt_email,
					receipt_num: vm.receipt_num,
					receipt_bank: vm.receipt_bank,
					receipt_account: vm.receipt_account,
					province_id: vm.province_id,
					province_name: vm.province_name,
					city_id: vm.city_id,
					city_name: vm.city_name,
					area_id: vm.area_id,
					area_name: vm.area_name,
					ticket_type: vm.ticket_type,
					business_address: vm.business_address,
					business_phone: vm.business_phone,

				}, function(ret) {
					// alert(JSON.stringify(ret, null, 2))
					toast(ret.msg)
					if (ret.status) {
						send_event('receipt_change')
						delay_close(500)
					}
				})

			}
		}
	})

	apiready = function() {
		if ($api.getStorage('receipt_info')) {
			vm.receipt_type = $api.getStorage('receipt_info').receipt_type
		    vm.receipt_person = $api.getStorage('receipt_info').receipt_person
			vm.receipt_name = $api.getStorage('receipt_info').receipt_name
			vm.receipt_num = $api.getStorage('receipt_info').receipt_num
			vm.receipt_phone = $api.getStorage('receipt_info').receipt_phone
			vm.receipt_address = $api.getStorage('receipt_info').receipt_address
			vm.receipt_account = $api.getStorage('receipt_info').receipt_account
			vm.receipt_bank = $api.getStorage('receipt_info').receipt_bank
			vm.receipt_email = $api.getStorage('receipt_info').receipt_email
		}
	};



	function select_address() {
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: cityData,
			layout: {
				row: 5,
				col: 3,
				height: 30,
				size: 13,
				sizeActive: 15,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#999',
				colorActive: '#333',
				colorSelected: '#333',
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#999',
				colorActive: '#999'
			},
			ok: {
				text: '完成',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#005A93',
				colorActive: '#005A93'
			},
			title: {
				text: '请选择地址',
				size: 12,
				h: 44,
				bg: '#fff',
				color: '#fff'
			},
			lineColor: '#E6E6E6',
			actives: vm.actives,
			fixedOn: api.frameName
		}, function(ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					vm.province_id = ret.selectedInfo[0].id
					vm.province_name = ret.selectedInfo[0].name
					vm.city_id = ret.selectedInfo[1].id
					vm.city_name = ret.selectedInfo[1].name
					vm.area_id = ret.selectedInfo[2].id
					vm.area_name = ret.selectedInfo[2].name
					vm.receipt_address = vm.province_name + vm.city_name + vm.area_name
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
</script>

</html>
